<%@ page import="com.hll.util.PropertyUtil" %>
<%@ page import="com.Constants" %>
<%@page import="com.hll.model.Pagination"%>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.hll.model.Book" %>
<%@ page import="com.hll.util.StringUtil" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的图书</title>
    <link href="<%=request.getContextPath()%>/static/style/reset.css" rel="stylesheet" type="text/css">
    <link href="<%=request.getContextPath()%>/static/style/common.css" rel="stylesheet" type="text/css">
    <link href="<%=request.getContextPath()%>/static/style/mybook.css" rel="stylesheet" type="text/css">
    <script type="application/javascript" src="<%=request.getContextPath()%>/static/js/common.js"></script>


</head>
<body>
<div class="disabled_screen" id="deleteBookMark" style="display:none"></div>
<div class="pop_win" id="deleteBookWin" style="display:none">
    <div class="title">确定删除？</div>
    <div class="action">
        <div class="action_item" onclick="confirmDeleteBook()">确定</div>
        <div class="action_item" style="margin-left: 40px;" onclick="cancelDeleteBook()">取消</div>
    </div>
</div>
<div class="warpper" id="mybookPage">
    <div id="headerWarpper">
        <div id="header">
            <div class="logo">图书分享</div>
            <div class="menu">
                <ul>
                    <li><a href="#">我的图书</a></li>
                    <li><a href="#" style="background-color: #2B6C85;">全部图书</a></li>
                </ul>
            </div>
            <div class="tool">
                <input name="searchKey" type="text">
                <img class="search button" src="<%=request.getContextPath()%>/static/images/BTN_Search_30x30.png"/>
                <img class="role_switch_button" src="<%=request.getContextPath()%>/static/images/BTN_SwitchRole_User_35x35.png"/>
            </div>
        </div>
    </div>
    <div id="breadcrumb">
        <ul>
            <li>当前位置&nbsp;&nbsp;</li>
            <li><a href="#"></a>我的图书</li>
        </ul>
    </div>

    <!--  FlashMessage开始部分 -->
    <%
        String successFlashMessage = (String)session.getAttribute(Constants.SUCCESS_FLASH_MESSAGE);
        successFlashMessage = successFlashMessage == null ? "" : successFlashMessage;//图书保存成功！
        String isDisplayFlashMessage = "";//是否展示
        if(successFlashMessage.equals("")) {
            isDisplayFlashMessage = "style='display:none'";
        }
    %>
    <div id="successFlashMessage" <%=isDisplayFlashMessage%>>
        <%
            out.write(successFlashMessage);
            session.removeAttribute(Constants.SUCCESS_FLASH_MESSAGE);
            if(!successFlashMessage.equals("")) {
        %>
        <script>
            setTimeout(function() {
                document.getElementById("successFlashMessage").style.display = "none";
            },3000);
        </script>
        <%
            }
        %>
    </div>

    <%
        String errorFlashMessage = (String)session.getAttribute(Constants.ERROR_FLASH_MESSAGE);
        errorFlashMessage = errorFlashMessage == null ? "" : errorFlashMessage;
        String isDisplayErrorFlashMessage = "style='display:block'";
        if(errorFlashMessage.equals("")) {
            isDisplayErrorFlashMessage = "style='display:none'";
        }
    %>

    <div id="errorFlashMessage" <%=isDisplayErrorFlashMessage %>>
        <%
            out.write(errorFlashMessage);
            session.removeAttribute(Constants.ERROR_FLASH_MESSAGE);
            if(!errorFlashMessage.equals("")) {
        %>
        <script>
            setTimeout(function() {
                document.getElementById("errorFlashMessage").style.display = "none";
            },3000);
        </script>
        <%
            }
        %>
    </div>

    <div class="main" id="mybookMain">
        <div id="left">
            <%--用户信息开始--%>
            <div class="user_information">
                <div class="user_header">
                    <img src="<%=request.getContextPath()%>/static/images/MyBooks_IMG_DefaultAvatar_80x80.png"/>
                    <div class="user_name">哎呀</div>
                </div>

                <div class="user_basis">
                    <div class="tip">
                        <label>基本资料</label>
                        <img src="<%=request.getContextPath()%>/static/images/BTN_Edit_20x20.png"/>
                    </div>
                    <ul>
                        <li><label>部门&nbsp;&nbsp;</label><span>开发部</span></li>
                        <li><label>公司&nbsp;&nbsp;</label><span>在家</span></li>
                        <li><label>地址&nbsp;&nbsp;</label><span>河南郑州</span></li>
                        <li><label>联系&nbsp;&nbsp;</label><span>12345678910</span></li>
                    </ul>
                </div>

            </div>
            <%--用户信息结束--%>
            <div class="user_message">
                <div class="my_message">
                    <label>我的消息</label>
                    <label class="message_tip"></label>
                    <label class="tip_count">4</label>
                </div>
                <div class="my_request">
                    <label>借书请求</label>
                    <label class="message_tip"></label>
                    <label class="tip_count">4</label>
                </div>
            </div>

        </div>
        <script>
            var deleteBookId;
            function showDeleteBookWin(id, status) {
                var deleteBookMarkObj = document.getElementById("deleteB ookMark");
                deleteBookMarkObj.style.display = "block";
                var deleteBookWinObj = document.getElementById("deleteBookWin");
                deleteBookWinObj.style.display = "block";
                deleteBookId = id;
            }
            function cancelDeleteBook() {
                var deleteBookMarkObj = document.getElementById("deleteBookMark");
                deleteBookMarkObj.style.display = "none";
                var deleteBookWinObj = document.getElementById("deleteBookWin");
                deleteBookWinObj.style.display = "none";
            }
            function confirmDeleteBook() {
                var queryString = location.search;
                if (queryString.indexOf("?") != -1) {
                    queryString = queryString.substr(1);
                }
                console.log(queryString);
                location.href = "<%=request.getContextPath()%>/deleteBook.action?id=" + deleteBookId + "&" + queryString;
            }
        </script>

        <div id="content">
            <div id="myBookTab">
                <ul>
                    <% String status = (String)request.getAttribute("status"); %>
                    <li <%if(status.equals("all")) { %> class="active" <% } %>><a href="<%=request.getContextPath()%>/myBook.action?status=all">全部</a>
                        <span><%=request.getAttribute("allCount") %></span></li>
                    <li <%if(status.equals("out")) { %> class="active" <% } %>><a href="<%=request.getContextPath()%>/myBook.action?status=out">已借出</a>
                        <span><%=request.getAttribute("outCount") %></span></li>
                    <li  <%if(status.equals("in")) { %> class="active" <% } %>><a href="<%=request.getContextPath()%>/myBook.action?status=in">未借出</a>
                        <span ><%=request.getAttribute("inCount") %></span></li>
                    <li <%if(status.equals("borrow")) { %> class="active" <% } %>><a href="<%=request.getContextPath()%>/myBook.action?status=borrow"  style="border-right: 1px solid #8EBACA">借入</a>
                        <span><%=request.getAttribute("borrowCount") %></span></li>
                </ul>
                <div><a href="<%=request.getContextPath()%>/editBook.action">新增图书</a></div>
            </div>
            <%--Table内容开始--%>
            <div class="table">
                <%--Table中的header--%>
                <div class="header">
                    <ul>
                        <li class="index">编号</li>
                        <li class="book_info">书籍</li>
                        <%
                            if (status.equals("borrow")) {
                        %>
                        <li class="book_sharer">共享者</li>
                        <% } else {%>
                        <li class="book_status">状态</li>
                        <li class="book_operator">操作</li>
                        <%}%>
                        <li class="book_history">借阅历史</li>
                    </ul>
                </div>
                <%--Table中的行内容--%>
                <div class="content">
                    <%
                        int i = 0;
                        List<Book> books = (List<Book>)request.getAttribute("books");
                        for (Book book : books) {
                            i ++;
                    %>
                    <div>
                        <ul>
                            <li class="index"><%=i%></li>
                            <li class="book_info">
                                <img class="book_img" src="<%=request.getContextPath() + book.getPicture()%>"/>
                                <label class="book_title" title="<%=book.getName()%>"><%=StringUtil.htmlEncode(book.getName())%></label>
                                <label class="book_author" title="<%=book.getAuthor()%>"><%=StringUtil.htmlEncode(book.getAuthor())%></label>
                            </li>
                            <% if(status.equals("borrow")) { %>
                            <li class="book_sharer">
                                <img src="<%=request.getContextPath()%>/static/images/ICN_Holder_Blue_30x30.png">
                                <label class="holder_name"><%=StringUtil.htmlEncode(book.getOwnerName())%></label>
                            </li>
                            <% } else { %>
                            <li class="book_status">
                                <img src="<%=request.getContextPath()%>/static/images/ICN_Holder_Blue_30x30.png"/>
                                <label class="holder_name"><%=StringUtil.htmlEncode(book.getCurrentOwnerName())%></label>

                                <%
                                    if (book.getOwnerId() == book.getCurrentOwnerId()) {
                                %>
                                <label class="status_dec">
                                    【未借出】
                                </label>
                                <%
                                } else {
                                %>
                                【已借出】
                                <%
                                    }
                                %>

                            </li>
                            <li class="book_operator">
                                <div class="cell">
                                    <%
                                        if (book.getOwnerId() == book.getCurrentOwnerId()) {
                                    %>
                                    <a class="update_button" href="<%=request.getContextPath()%>/editBook.action?id=<%=book.getId()%>">更新</a>
                                    <div class="update_button" onclick="showDeleteBookWin(<%=book.getId()%>)">删除</div>
                                    <%
                                    } else {
                                    %>
                                    <a class="update_button" href="<%=request.getContextPath()%>/editBook.action?id=<%=book.getId()%>">更新</a>
                                    <%
                                        }
                                    %>
                                </div>
                            </li>
                            <% } %>
                            <li class="book_history">
                                <div class="short_desc">
                                    1 <br>
                                    2 <br>
                                    3 <br>
                                </div>
                                <img class="read_more"src="<%=request.getContextPath()%>/static/images/ICN_ReadMore_30x10.png"/>
                            </li>
                        </ul>
                    </div>
                    <%
                        }
                    %>
                    <%--一行结束--%>
                </div>
                <%--内容行结束--%>
            </div>

            <%--分页开始--%>
            <%Pagination pagination =(Pagination) request.getAttribute("pagination"); %>
            <script>
                function paginationGo() {
                    //pageCount是当前页
                    var pageCount = document.getElementById("currentPage").value;
                    if(!isInteger(pageCount)) {
                        var errorFlashMessageObj = document.getElementById("errorFlashMessage");
                        errorFlashMessageObj.innerHTML = "请输入正确的页码";
                        document.getElementById("errorFlashMessage").style.display = "block";
                        setTimeout(function() {
                            document.getElementById("errorFlashMessage").style.display = "none" ;
                        },3000);
                        return;

                    }
                    location.href = "<%=request.getContextPath()%>/myBook.action?currentPage=" + pageCount + "&status=" + status;
                }
            </script>

            <div class="pagination">
                    <span class="first_page">
                        <% if (pagination.isFirstPage()) { %>
                            <img src="<%=request.getContextPath()%>/static/images/MyBooks_BTN_FirstPage_Disable_20x20.png"/>
                        <% } else { %>
                        <a href = "<%=request.getContextPath() %>/myBook.action?currentPage=1&status=<%=status%>">
                            <img src="<%=request.getContextPath()%>/static/images/MyBooks_BTN_FirstPage_Normal_20x20.png">
                        </a>
                      <% } %>
                    </span>
                <span class="pre_page">
                      <% if(!pagination.isFirstPage() && pagination.getCurrentPage() >1) { %>
                        <a href = "<%=request.getContextPath() %>/myBook.action?currentPage=<%=pagination.getCurrentPage() - 1 %>&status=<%=status%>">
                        <img src="<%=request.getContextPath()%>/static/images/MyBooks_BTN_PrePage_Normal_20x20.png">
                        </a>
                      <% } else { %>
                         <img src="<%=request.getContextPath()%>/static/images/MyBooks_BTN_PrePage_Disable_20x20.png">
                      <% } %>
                    </span>

                <span class="current_page">第<%=pagination.getCurrentPage() %>页</span>

                <span class="next_page">
                      <% if(!pagination.isLastPage() && pagination.getPageCount() >1) { %>
                        <a href = "<%=request.getContextPath() %>/myBook.action?currentPage=<%=pagination.getCurrentPage() + 1 %>&status=<%=status%>">
                        <img src="<%=request.getContextPath()%>/static/images/MyBooks_BTN_NextPage_Normal_20x20.png">
                        </a>
                      <% } else { %>
                        <img src="<%=request.getContextPath()%>/static/images/MyBooks_BTN_NextPage_Disable_20x20.png">
                        <% } %>
                    </span>

                <span class="last_page">
                      <% if(pagination.isLastPage()) { %>
                      <img src="<%=request.getContextPath()%>/static/images/MyBooks_BTN_LastPage_Disable_20x20.png">
                      <% } else { %>
                        <a href = "<%=request.getContextPath() %>/myBook.action?currentPage=<%=pagination.getPageCount()%>&status=<%=status%>">
                        <img src="<%=request.getContextPath()%>/static/images/MyBooks_BTN_LastPage_Normal_20x20.png">
                        </a>
                      <% } %>
                      </span>

                <span class="total_page">共<%=pagination.getPageCount()%>页</span>
                <span class="go_desc">到第</span>
                <input type="text" class="go_input" id="currentPage" name="currentPage" value="<%=pagination.getCurrentPage()%>"/>
                <span class="go_page">页</span>
                <span class="go_button" onclick="paginationGo()">GO</span>
            </div>
            <%--分页结束--%>
        </div>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>
